<template>
  <div class="video-container">
    <video ref="videoPlayer" class="video-player" v-show="videoVisible" controls :src="videoSrc" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const videoSrc = ref('http://localhost:9090/lx2.mp4');
    const videoVisible = ref(true);
    const videoPlayer = ref(null);

    const playVideo = () => {
      videoPlayer.value.play();
    };

    onMounted(() => {
      videoPlayer.value.load();
    });

    return { videoSrc, videoVisible, playVideo, videoPlayer };
  },
};
</script>

<style scoped>
h1 {
  margin: 20px 0;
}
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.video-player {
  width: 300px;
  height: 380px;
  border: 5px solid #333;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
</style>